<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>8.watch监听属性</title>
        <!-- 引入Vue -->
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="app">
            <h1>你认识 吴彦祖吗？ {{ isRecognize }}  </h1>
            <button @click="recognize = !recognize">你百度一下</button>
            <hr>

            <h1>姓名:{{user.uname}}</h1>
            <h1>年龄:{{user.age}}</h1>

            <button @click="user.uname ='李四'">改姓名</button>
            <button @click="user.age = 30">改年龄</button>
            <button @click="user = 12234 ">改对象</button>

        </div>
    </body>

    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                recognize:false,
                user:{
                    uname:"张三",
                    age:18
                }
            },
            computed:{   //计算属性
                isRecognize(){
                    return this.recognize ? "认识" : "不认识" 
                }
            },
            watch:{   //监听属性  监视属性
                recognize:{
                    immediate:true,   //立即监视
                    handler(newValue,oldValue){  //当 要监听的数据发生变化时，执行回调
                        // console.log(newValue,oldValue)
                       newValue === false ?  console.log("那请你向路倩倩学习百度一下") : console.log("恭喜你，别百度了"); 
                    }
                },
                /* "user.uname":{
                    handler(){
                        console.log("名字被改了");
                    }
                },
                "user.age":{
                    handler(){
                        console.log("年龄被改了");
                    }
                } */
                user:{
                    deep:true,  //深度监视
                    handler(){
                        console.log("名字或 年龄或user本身被改了");
                    }
                }
            }
        })

        // vm.$watch("recognize",{
        //     handler(newValue,oldValue){  //当 要监听的数据发生变化时，执行回调
        //         // console.log(newValue,oldValue)
        //         newValue === false ?  console.log("那请你向路倩倩学习百度一下") : console.log("恭喜你，别百度了"); 
        //     }
        // });

        // console.log(vm);
    </script>
</html>